<template>
  <div class="relative w-full h-full overflow-y-auto">
    <PageHeader :title="t('annualFee.商户年费管理')" />
    <div class="content mt24 ml24">
      <div class="flex_aic">
        <div class="label color-999999">{{ t('annualFee.上次年费缴纳时间') }}</div>
        <div class="ml10">
          {{
            tentInfo?.lastRenew?.createdTime ?
                moment(tentInfo?.lastRenew?.createdTime).format("YYYY-MM-DD") : '&#45;&#45;'
          }}
        </div>
      </div>
      <div class="flex_aic mt10">
        <div class="label color-999999">{{ t('annualFee.到期时间') }}</div>
        <div class="ml10">
          {{
            tentInfo?.validTimeEnd ? moment(tentInfo?.validTimeEnd).format("YYYY-MM-DD") : '--'
          }}
        </div>
      </div>
      <div class="flex_aic mt10">
        <div class="label color-999999">{{ t('annualFee.倒计时') }}</div>
        <div class="ml10">
          {{
            tentInfo?.validTimeEnd ? moment(tentInfo?.validTimeEnd).diff(
              moment(tentInfo?.validTimeStart),
              "days"
            ) : '--'
          }}{{ t('annualFee.天') }}
        </div>
      </div>
      <!-- <div class="flex_aic mt10">
        <div class="label color-999999">{{ t('annualFee.年费金额') }}</div>
        <div class="ml10">{{ tentInfo?.lastTenantRenew?.ruleFee ? tentInfo?.lastTenantRenew?.ruleFee + t('annualFee.元') : '--' }}</div>
      </div> -->
      <div class="flex_aic mt10">
        <div class="label color-999999">{{ t('annualFee.年费缴纳状态') }}</div>
        <div class="ml10" :style="{ 'color': payStatus == 1 ? '#67C23A' : '#ff0000'}">
          {{
            payStatus == 1 ? t('annualFee.未过期') : t('annualFee.已过期')
          }}
        </div>
      </div>
      <div
        class="flex_aic mt10"
        v-if="tentInfo?.tenant?.lastRenew?.checkStatus != 0"
      >
        <div class="label color-999999"></div>
        <el-button type="primary" class="mt24" @click="handlePay" v-my-point="'tenantRenew:add'"
          >{{ t('annualFee.缴纳年费') }}</el-button
        >
      </div>
    </div>

    <!-- 缴费记录列表 -->
    <div class="payment-records mt40">
      <PageHeader :title="t('annualFee.缴费记录')" />

      <el-table
        :data="tableData"
        border
        style="width: 100%"
        class="cover-table"
        v-loading="loading"
      >
        <el-table-column :prop="'createdTime'" :label="t('annualFee.缴费时间')">
          <template #default="scope">
            {{ moment(scope.row.createdTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column :prop="'ruleFee'" :label="t('annualFee.缴费金额')">
          <template #default="scope"> {{ scope.row.ruleFee }}{{ t('annualFee.元') }} </template>
        </el-table-column>
        <el-table-column :prop="'ruleFee'" :label="t('annualFee.年费年份')">
          <template #default="scope"> {{ scope.row.ruleDuration }}{{ t('annualFee.年') }} </template>
        </el-table-column>
        <el-table-column :prop="'payImage'" :label="t('annualFee.凭证')">
          <template #default="scope">
            <div class="flex_aic gap-12 flex-wrap">
              <el-image
                  v-for="img in scope.row.payImage?.split(',') || []"
                  style="width: 60px; height: 60px"
                  :src="img"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[img]"
                  show-progress
                  fit="cover"
                  :preview-teleported="true"
              />
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column :prop="'shopName'" :label="t('annualFee.缴费店铺名称')" /> -->
        <!-- <el-table-column :prop="'account'" :label="t('annualFee.缴费账户')" /> -->
        <el-table-column :prop="'status'" :label="t('annualFee.缴费审核状态')">
          <template #default="scope">
            <el-tag :type="statusMap[scope.row.checkStatus]?.color">
              {{ statusMap[scope.row.checkStatus]?.label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="t('annualFee.操作')" fixed="right" width="200">
          <template #default="scope">
            <el-button
              v-if="scope.row.checkStatus == -1"
              type="text"
              size="small"
              @click="viewRejectReason(scope.row)"
            >
              {{ t('annualFee.查看驳回原因') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 驳回原因对话框 -->
    <el-dialog v-model="dialogVisible" :title="t('annualFee.驳回原因')" width="30%">
      <div class="reject-reason">{{ currentRejectReason }}</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">{{ t('annualFee.关闭') }}</el-button>
        </span>
      </template>
    </el-dialog>

    <PayDia v-model="showPayDia" @success="getDataList"/>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useI18n } from "vue-i18n";
import Api from "@/config/api/api";
import moment from "moment";
import PayDia from "./payDia.vue";

const { t } = useI18n();

const showPayDia = ref(false);
const tentInfo = ref();
// const tentInfo = ref(Storage.get("user", true));
const tableData = ref([]);
const loading = ref(false)
// 0待审核 1审核通过 -1审核失败
const statusMap = {
  0: {
    label: t('annualFee.待审核'),
    color: "warning",
  },
  1: {
    label: t('annualFee.审核通过'),
    color: "success",
  },
  "-1": {
    label: t('annualFee.审核失败'),
    color: "danger",
  },
};
const payStatus = computed(()=>{
  // 0已过期， 1未过期
  return moment(tentInfo?.value?.validTimeEnd).diff(moment(), "days") > 0 ? 1 : 0
})
// 缴纳年费
const handlePay = () => {
  showPayDia.value = true;
};

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);

const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  getDataList();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  getDataList();
};

// 驳回原因相关
const dialogVisible = ref(false);
const currentRejectReason = ref("");

const viewRejectReason = (row) => {
  currentRejectReason.value = row.rejectReason;
  dialogVisible.value = true;
};

const getDataList = () => {
  loading.value = true
  Api.tenantRenewList({
    page: currentPage.value - 1,
    pageSize: pageSize.value,
  }).then((res) => {
    tableData.value = res.data.content;
    total.value = Number(res.data.totalElements || 0);
  }).finally(() => {
    loading.value = false
  });
};

onMounted(async () => {
  await getTenantCurrent();// 查询当前商户表详情
  getDataList();
});

const getTenantCurrent = async () => {
  return await Api.tenant_current({}).then((res2) => {
    if (res2.status === 200) {
      tentInfo.value = res2.data;
    }
  });
};
</script>

<style lang="scss" scoped>
.label {
  width: 120px;
  text-align: right;
}

.payment-records {
  padding: 0 24px;
}

.titleRow {
  width: 100%;
  height: 36px;
  border-radius: 2px;
  background: rgba(255, 120, 45, 0.05);
  line-height: 36px;
  font-weight: 500;
  color: #333;
  font-size: 16px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.reject-reason {
  padding: 10px;
  background-color: #f8f8f8;
  min-height: 60px;
  border-radius: 4px;
  color: #555;
  line-height: 1.6;
}

.mt40 {
  margin-top: 40px;
}
</style>
